<template>
  <!--设置群发参数-->
  <div class="dialg" v-if="paramsshow">
      <el-row class="setparameter p_bottom20 dialog_text">
        <el-row class="title p_lr20">
          <el-col :span="20">设置群发参数</el-col>
          <el-col :span="4" class="t_right"><span @click="closeFn"><img class="close pointer" src="@/assets/img/plan/layerclose.png"></span></el-col>
        </el-row>
        <el-row class="dialog_text p_lr20 font_12 color_33">
            <el-col :span="12" class=" ">
                <div class="settittle p_tb12">计划发布格式设置:</div>
                <div class="p_l20">
                    <div class="m_top10">
                        <span>计划昵称</span>
                        <input class="nicinput height25 broder_1d font_12 m_left5" v-model="pramasinfo.name" type="text" />
                    </div>
                    <div class="m_top10">
                        <span>数据期数</span>
                        <input type="number" class="nubinput broder_1d font_12 m_left5" v-model="pramasinfo.date" />
                    </div>
                    <div class="m_top10">
                        <span>头部标题</span>
                        <span class="m_left5"><textarea class="headtip font_12 broder_1d" placeholder="请输入标题内容" v-model="pramasinfo.headtitle"></textarea></span>
                    </div>
                    <div class="m_top10">
                        <span>尾部提醒</span>
                        <span class="m_left5"><textarea class="headtip font_12 broder_1d" v-model="pramasinfo.btip"></textarea></span>
                    </div>
                    <div class="m_top10" style="padding-left: 0.55rem">
                        <div>
                            <el-checkbox v-model="checkedformat1">头部显示最新开奖数据</el-checkbox>
                            <el-checkbox v-model="checkedformat2">尾部显示最新开奖数据</el-checkbox>
                        </div>
                        <div>
                            <el-checkbox v-model="checkedformat3">显示计划周期内部序列</el-checkbox>
                            <el-checkbox v-model="checkedformat4">每行未尾显示开奖号码</el-checkbox>
                        </div>
                        <div>
                            <el-checkbox v-model="checkedformat5">是否标记群发时间</el-checkbox>
                        </div>
                    </div>
                </div>
                <div class="m_top10">
                    <span>计划正确显示</span><input class="height25 width60 broder_1d m_left5" type="text" v-model="pramasinfo.plancorrect" />
                    <span class="m_left15">计划错误显示</span><input class="height25 width60 broder_1d m_left5" type="text" v-model="pramasinfo.planerror" />
                </div>
                <div class="m_top10">
                    <span>计划未开显示</span><input class="height25 width60 broder_1d m_left5" type="text" v-model="pramasinfo.planstart"/>
                </div>
                <div class="m_top10">
                    <span>头尾间隔字符</span><input class="height25 width60 broder_1d m_left5" type="text" v-model="pramasinfo.hbspacer"/>
                    <span class="m_left15">计划间隔字符</span><input class="height25 width60 broder_1d m_left5" type="text" v-model="pramasinfo.spacer"/>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="settittle p_tb12">图片群发设置:</div>
                <div class="p_l20">   
                    <div class="m_top10"><el-checkbox v-model="checked">QQ群发计划时使用图片格式</el-checkbox></div>
                    <div class="m_top10">
                        <span>字体大小</span><input class="nubinput broder_1d font_12 m_left5" type="number" v-model="pramasinfo.fontsize"/>
                        <span class="m_left15">图片宽度</span><input class="nubinput broder_1d font_12 m_left5" type="number" v-model="pramasinfo.imgwidht"/>
                        <span class="m_left15">字体颜色</span><span></span>
                    </div>
                </div>
                <div>
                    <div class="m_top1 settittle m_top20">其他设置：</div>
                    <div class="">
                        <div class="m_top10">
                          <span class="inlineblock width80 t_right">QQ群发间隔</span><input class="width70 height25 broder_1d font_12 m_left5" type="number" v-model="pramasinfo.time" /><span class="m_left5">毫秒</span>
                        </div>
                        <div class="m_top10">
                          <span class="inlineblock width80 t_right">计划发布延迟</span><input class="width70 height25 broder_1d font_12 m_left5" type="number" v-model="pramasinfo.delay" /><span class="m_left5">秒</span>
                          <div class="m_top10" style="padding-left: 0.9rem"><el-checkbox v-model="pramasinfo.automaticexport">自动导出计划数据</el-checkbox></div>
                        </div>
                        <div class="m_top10">
                            <span class="inlineblock width80 t_right">计划导出路径</span>
                            <input style="width: 2rem" class="height25 broder_1d font_12 m_left5" type="text" v-model="pramasinfo.path" />
                            <span class="m_left5 color_E5">浏览</span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="t_right font_12 m_top20 p_lr20">
                <span class="qqlistbnt bg_colorE5 color_ff" @click="keepFn">保存</span>
                <span class="qqlistbnt broder_1d color_33 m_left15" @click="closeFn">取消</span>        
            </el-row>
    </el-row>
    
  </div>

</template>

<script>
    export default {
      data () {
        return {
            // paramsshow: true,
            pramasinfo: {
                name: '',
                date: '',
                headtitle:'',
                btip: '',
                plancorrect: '',
                planerror: '',
                planstart: '',
                hbspacer: '',
                spacer: '',
                fontsize: '',
                imgwidht: '',
                fontcolor: '',
                time:'',
                delay: '',
                automaticexport: false,
                path: '',

            },
            checkedformat1: false,
            checkedformat2: false,
            checkedformat3: false,
            checkedformat4: false,
            checkedformat5: false,
            checked: false,
            checked1: false,
            checkList: ['选中且禁用','复选框 A']
        }
    },
    props:{
        paramsshow:{
            type: Boolean
        }
    },
    created () {
              
    },
      methods: {
        cansolFn(){
            this.addtype = false
            this.addname = ''
        },
       keepFn () {
            if (!this.pramasinfo.name) {
                this.$toast({
                    message: '请填写计划昵称'
                });
            } else if(!this.pramasinfo.date){
                this.$toast({
                    message: '请填写数据期数'
                });
            } else if(!this.pramasinfo.headtitle){
                this.$toast({
                    message: '请输入头部标题'
                });
            } else if(!this.pramasinfo.btip){
                this.$toast({
                    message: '请输入尾部提醒'
                });
            } else if(!this.pramasinfo.plancorrect){
                this.$toast({
                    message: '请设置计划正确显示'
                });
            } else if(!this.pramasinfo.planerror){
                this.$toast({
                    message: '请设置计划错误显示'
                });
            } else if(!this.pramasinfo.planstart){
                this.$toast({
                    message: '请设置计划未开显示'
                });
            } else if(!this.pramasinfo.hbspacer){
                this.$toast({
                    message: '请设置头尾间隔字符'
                });
            } else if(!this.pramasinfo.spacer){
                this.$toast({
                    message: '请设置计划间隔字符'
                });
               } else if(!this.pramasinfo.fontsize){
                this.$toast({
                    message: '请设置字体大小'
                });
            } else if(!this.pramasinfo.imgwidht){
                this.$toast({
                    message: '请设置图片大小'
                });
            } else if(!this.pramasinfo.time){
                this.$toast({
                    message: '请设置QQ群发间隔'
                });
            } else if(!this.pramasinfo.delay){
                this.$toast({
                    message: '请设置计划发布延迟'
                });
            } else if(!this.pramasinfo.path){
                this.$toast({
                    message: '请选择计划导出路径'
                });
            } else {
                this.$toast({
                    message: '保存成功！'
                });
            }
       },
       delFn(){
           this.$toast({
                    message: '删除成功！'
                });
       },
       closeFn () {
           this.$emit('closeparams')
       }
      },
    }
</script>

<style>
    .setparameter .el-checkbox__label{
        font-size: 12px;
        color: #333333;
    }
    .setparameter .el-checkbox+.el-checkbox{
        margin-left: 0.15rem;
    }
    .setparameter .el-checkbox__input.is-checked+.el-checkbox__label{
        color: #E52A20;
    }
   .setparameter .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color: #E52A20;
        border-color: #E52A20;
   }
   .setparameter .el-checkbox__inner:hover{
        border-color: #E52A20;
   }
</style>
<style lang="less" scoped>
  @import url(../../assets/css/public.less);
  @import url(../../assets/css/plan/planlayer.less);
  @import url(../../assets/css/plan/planpublic.less);
</style>
